<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box{
      width: 200px;
      height: 200px;
      background-color: rgb(187, 99, 99);
      margin: 50px auto;
    }
  </style>
</head>
<body>
  <div id="app">
    <input type="text" v-model="inputTxt">
    {{ inputTxt }}
    <hr>
    <!-- 单选框 -->
    性别：
    <label for="male">男</label>
    <input type="radio" id="male" value="男" v-model="gender">
    <br>
    <label for="female">女</label>
    <input type="radio" id="female" value="女" v-model="gender">
    <br>
    {{ gender }}
    <hr>
    <!-- 复选框 -->
    爱好：
    <label for="bst">篮球</label>
    <input type="checkbox" id="bst" value="篮球" v-model="hobby">
    <label for="piqiu">皮球</label>
    <input type="checkbox" id="piqiu" value="皮球" v-model="hobby">
    <label for="foot">足球</label>
    <input type="checkbox" id="foot" value="足球" v-model="hobby">
    <label for="paiqiu">排球</label>
    <input type="checkbox" id="paiqiu" value="排球" v-model="hobby">
    <label for="pingpong">乒乓球</label>
    <input type="checkbox" id="pingpong" value="乒乓球" v-model="hobby">
    <hr>
    {{ hobby }}
    <hr>
    复选框第二种用法，选中状态 和 一个布尔值进行绑定（上面那种是和value属性绑定，checked属性绑定）
    <input type="checkbox" v-model="isBeauty" />
    {{ isBeauty?'大美女':'好姑娘' }}
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      data: {
        inputTxt: '初始值',
        gender: '女',
        hobby: ['皮球','篮球'],
        isBeauty: true
      }
    })
    vm.$mount('#app');
  </script>
</body>
</html>